<template>
  <div>
    <!-- 头部导航 -->
    <div>
      <van-nav-bar fixed placeholder>
        <!-- <img class="logo" :src="imgObj" /> -->
        <template #left>
          <van-icon name="fire" size="1rem" color="#fff" />
          <span class="heard_text">X X 头条</span>
        </template>
        <template #right>
          <van-icon
            @click="$router.push('/search')"
            name="search"
            size="1rem"
            color="#fff"
          />
        </template>
      </van-nav-bar>
    </div>
    <!-- 主体导航 -->
    <div>
      <!-- 标签页 -->
      <van-tabs
        @change="channelChangeFn"
        v-model="channelId"
        sticky
        offset-top="2.56rem"
      >
        <van-tab
          :name="item.id"
          :title="item.name"
          v-for="item in userChannelList"
          :key="item.id"
        >
          <ArticleList :channelId="channelId" />
        </van-tab>
      </van-tabs>
      <!-- 编辑频道图标 -->
      <van-icon
        @click="show = true"
        name="plus"
        size="0.37333334rem"
        class="moreChannels"
      />
    </div>
    <!-- 弹出层组件 -->
    <van-popup
      v-model="show"
      position="top"
      get-container="body"
      :style="{ height: '100%' }"
    >
      <ChannelEdit
        :userChannelList="userChannelList"
        :unCheckChannelList="unCheckChannelList"
        @addChannelFn="addChannelFn"
        @removeChannelFn="removeChannelFn"
        @changeChannels="changeChannelsFn"
        @clockChannel="show = false"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  getUserChannelsAPI,
  getAllChannelsAPI,
  updateUserChannelsAPI
} from '@/api'
import ArticleList from './components/articleList'
import ChannelEdit from './components/channelEdit'

export default {
  name: 'myHome',
  data () {
    return {
      channelId: 0,
      show: false, // 控制弹出层是否展示
      userChannelList: [], // 用户已选频道列表数据
      allChannelList: [], // 所有已选频道列表数据
      channelScrollObj: new Set() // 保存每个频道的滚动位置
    }
  },
  async created () {
    // 用户已选频道列表
    const { data: res } = await getUserChannelsAPI()
    this.userChannelList = res.data.channels

    // 所有已选频道列表
    const { data: res2 } = await getAllChannelsAPI()
    this.allChannelList = res2.data.channels
  },
  components: {
    ChannelEdit,
    ArticleList
  },
  computed: {
    // 用户未选择的频道数据
    unCheckChannelList () {
      return this.allChannelList.filter(
        (bigObj) =>
          this.userChannelList.findIndex(
            (smallObj) => smallObj.id === bigObj.id
          ) === -1
      )
    }
  },
  methods: {
    // 用户添加频道
    addChannelFn (obj) {
      this.userChannelList.push(obj)
      this.putChannelFn(obj)
    },
    // 用户删除频道
    removeChannelFn (obj) {
      this.userChannelList = this.userChannelList.filter(
        (item) => obj.id !== item.id
      )
      this.putChannelFn(obj)
    },
    // 用户完成编辑
    async putChannelFn (obj) {
      const arr = this.userChannelList.filter((obj) => obj.id !== 0)
      const resultList = arr.map((item, index) => {
        const newObj = { ...item } // 浅拷贝(让对象和原数组脱离关系)
        newObj.seq = index + 1
        delete newObj.name // 删除对象里name键值对
        return newObj
      })
      await updateUserChannelsAPI(resultList)
    },
    // 用户切换频道
    changeChannelsFn (obj) {
      this.channelId = obj.id
      this.show = false
    },
    //  获取滚动条的位置
    getScrollTop () {
      /**
       * ! 谷歌浏览器内核和安卓手机内置浏览器内核不同
       * * 获取 scrollTop 的方式不同
       * ? 谷歌浏览器使用 html 的 scrollTop
       * ? 有些浏览器使用 body 的 scrollTop
       */
      this.$route.meta.scrollT =
        document.documentElement.scrollTop || document.body.scrollTop
      // 保存当前频道的滚动条位置
      this.channelScrollObj[this.channelId] =
        document.documentElement.scrollTop || document.body.scrollTop
    },
    // tap 栏切换事件方法
    channelChangeFn () {
      this.$nextTick(() => {
        document.documentElement.scrollTop =
          this.channelScrollObj[this.channelId]
        document.body.scrollTop = this.channelScrollObj[this.channelId]
      })
    }
  },
  activated () {
    window.addEventListener('scroll', this.getScrollTop)
    document.documentElement.scrollTop = this.$route.meta.scrollT
    document.body.scrollTop = this.channelScrollObj[this.channelId]
  },
  // 用了组件缓存，切走页面失去激活生命周期就会触发
  deactivated () {
    window.removeEventListener('scroll', this.getScrollTop)
  }
}
</script>

<style lang="less" scoped>
.heard_text {
  margin-left: 10px;
  color: #fff;
}

// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
</style>
